<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>热门推荐</title>

		<script src="zepto.min.js"></script>

		<style>
			html,
			body {
				height: 100VH;
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.3);
				color: white;
				font-size: 0.625rem;
			}

			a {
				text-decoration: none;
			}

			.root {
				height: 100VH;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.box {
				display: flex;
				height: 100%;
				width: 90%;
				box-sizing: border-box;
				flex-direction: column;
				padding: 0rem;
				border: 5%;
				border-radius: 4%;
				margin: 2rem;
			}

			.top {
				text-align: center;
				font-size: 3rem;
				margin-top: 10%;
				font-weight: bold;
			}

			.center {
				flex: 1;
			}

			.bottom a {
				display: block;
				padding: 1.3rem 2.75rem;
				border-radius: 1.25rem;
				color: white;
				font-size: 2rem;
				text-align: center;
				border: 1px solid #fff;
			}

			.close {
				margin-bottom: 10%;
				display: flex;
				justify-content: center;
				margin-top: 6%;
			}

			.close span {
				display: block;
				width: 1rem;
				height: 1rem;
				text-align: center;
				font-size: 2rem;
			}
		</style>

	</head>
	<body>

		<div class="root">
			<div class="box">
				<div class="top">热门推荐</div>
				<div class="center"></div>
				<div class="bottom">
					<a href="">立即下载</a>
				</div>
				<div class="close">
					<span id="close">X</span>
				</div>
			</div>
		</div>


	</body>

	<script type="text/javascript">
		$('#close').on('click', function() {
			AndroidInterface.dismiss("");
		});
	</script>
</html>